<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="../include/tag.jsp" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <title>图片资源管理</title>
    <%@include file="../include/commonFile.jsp" %>
    <link rel="stylesheet" href="${ctx}/css/ui/imgRes/list.css">
</head>
<body>
<!--头部-->
<%@include file="../include/header.jsp" %>
<div class="index-outside">
    <%@include file="../include/sidebar.jsp" %>
    <!--内容-->
    <section>
        <div class="section-main">
            <%--<div class="f-search-bar">--%>
                <%--<form class="layui-form" action="${ctx}/help/help/list.do" id="myForm" method="post">--%>
                    <%--<ul class="search-form-content">--%>
                        <%--<li class="form-item">--%>
                            <%--<label class="search-form-lable">类型</label>--%>
                            <%--<div class="check-btn-inner" id="biz_type">--%>
                                <%--<a id="all" href="javascript:void(0);" class="active" data-type="">全部</a>--%>
                                <%--<c:forEach items="${types}" var="type">--%>
                                    <%--<a href="javascript:void(0);" data-type="${type.key}">${type.value}</a>--%>
                                <%--</c:forEach>--%>
                            <%--</div>--%>
                        <%--</li>--%>
                    <%--</ul>--%>
                <%--</form>--%>
            <%--</div>--%>
            <div id="check_status" class="check-status" style="display: none">已选择<span class="check-num"></span>项<a
                    href="javascript:main.resetCheck()" class="ml20">取消选择</a><a href="javascript:main.delAll();"
                                                                                class="r"><i
                    class="iconfont icon-delete"></i></a></div>
            <div class="main-data mt20">
                <ul class="imgs-wrap" id="img_list">
                </ul>
            </div>

        </div>
        <!--底部-->
        <%@include file="../include/footer.jsp" %>
    </section>
</div>
<script id="img_tpl" type="text/html">
    {{#  layui.each(d, function(index, item){ }}
    <li class="img-item" title="{{ item.name }}" data-id="{{ item.id }}">
        <div class="img-box">
            <div class="img-inner"
                 style="background-image:url({{ main.getResourceUrl(item.path)}})">
            </div>
            <div class="opts-box">
                <div class="opt-check"><i class="iconfont icon-square"></i><i class="iconfont icon-squarecheck"></i>
                </div>
                <i class="iconfont icon-delete"></i>
            </div>
        </div>
        <div class="img-title ellipsis-1">{{ item.name }}</div>
    </li>
    {{#  }); }}
</script>
<%@include file="../include/incScript.jsp" %>
<script src="${ctx}/script/upload/cosUploadUtil.js"></script>
<script type="text/javascript">
    var laytpl, layer, cosRegion;
    new CosUtil().getConfig(function (ret) {
        cosRegion = ret.data.region;
    });
    $(function () {
        layui.use(['laytpl', 'layer'], function () {
            laytpl = layui.laytpl;
            layer = layui.layer;
            main.init();
        });
        txz.initHeader({
            nav: [{
                name: '图片资源管理',
                href: '${ctx}/file/img/list.do',
                curr: true
            }]
        });
    })

    var main = {
        page: 1,
        pageSize: 20,
        noMoreData: false,
        checkCount: 0, // 选中的个数
        type: null,
        init: function () {
            main.listData();
            $('#biz_type a').click(function (e) {
                if (!$(this).hasClass('active')) {
                    main.type = $(this).data('type');
                    $('#biz_type a.active').removeClass('active');
                    $(this).addClass('active');
                    main.page = 1;
                    main.noMoreData = false;
                    main.listData(main.type);
                    main.checkCount = 0;
                    main.toggleCheckSta();
                }
            });
            $('#img_list').on('click', '.img-item', function (e) {
                var $item = $(this);
                if ($item.hasClass('check')) {
                    $item.removeClass('check');
                    --main.checkCount;
                } else {
                    $item.addClass('check');
                    ++main.checkCount;
                }
                main.toggleCheckSta();
            })
            $('#img_list').on('click', '.icon-delete', function (e) {
                var $item = $(this).closest('.img-item');
                $item.addClass('check');
                main.deleteImg($item.data('id'));
                e.stopPropagation();
            })
            txz.toBtmListener(function () {
                if (!main.noMoreData) {
                    ++main.page;
                    main.listData(main.type);
                }
            }, 100, '.index-outside>section');

        },
        resetCheck: function () {
            $('.img-item.check').removeClass('check');
            main.checkCount = 0;
            main.toggleCheckSta();
        },
        delAll: function () {
            var ids = [];
            $('.img-item.check').each(function () {
                ids.push($(this).data('id'));
            })
            main.deleteImg(ids.join(','));
        },
        deleteImg: function (ids) {
            layer.confirm('确定删除么？', {
                btn: ['确定', '取消'] // 按钮
            }, function () {
                txz.ajaxRequest({
                    url: '${ctx}/file/img/api/del.do',
                    params: {
                        ids: ids
                    },
                    callBack: function (ret) {
                        util.layerMsgSuccess('删除成功');
                        var idArray = ids.split(',');
                        for (var i = 0; i < idArray.length; i++) {
                            $('.img-item[data-id="' + idArray[i] + '"]').remove();
                        }
                    }
                });
            });
        },
        toggleCheckSta: function () {
            $('#check_status .check-num').text(main.checkCount);
            if (main.checkCount) {
                $('#check_status').show();
            } else {
                $('#check_status').hide();
            }
        },
        listData: function (type) {
            txz.ajaxRequest({
                url: '${ctx}/file/img/api/list.do',
                params: {
                    pageNo: main.page,
                    limit: main.pageSize,
                    type: type
                },
                callBack: function (ret) {
                    if (!ret.page.hasNextPage) {
                        main.noMoreData = true;
                    }
                    if (main.page === 1) {
                        $('#img_list').html('');
                    }
                    var getTpl = $('#img_tpl').html()
                        , view = $('#img_list');
                    laytpl(getTpl).render(ret.data, function (html) {
                        view.html(view.html() + html);
                    });
                }
            });
        },
        getResourceUrl: function (resource_path) {
            var iAppid = resource_path.split('/')[1], iBucket = resource_path.split('/')[2];
            return 'http://' + iBucket + '-' + iAppid + '.cos' + cosRegion + '.myqcloud.com' + resource_path.replace('/' + iAppid + '/' + iBucket, '');
        }
    }
</script>
</body>
</html>